<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>dataList</view>
					<view>Array(Object)</view>
					<view>无</view>
					<view>图片组数据集。对象格式：</view>
				</view>
				<view class="appendix">
					<view class="">
						image: 图片地址
					</view>
					<view class="">
						icon: 无图片地址时，使用的图标名
					</view>
					<view class="">
						deletable: 该图片是否可删
					</view>
					<view class="">
						state: 	当前图片状态
						<view class="ml-e2">
							waiting等待中
						</view>
						<view class="ml-e2">
							uploading上传中
						</view>
						<view class="ml-e2">
							fail失败
						</view>
						<view class="ml-e2">
							toDelete待删除
						</view>
						<view class="ml-e2">
							deleting删除中
						</view>
						<view class="ml-e2">
							空值为正常结束
						</view>
					</view>
					<view class="">
						msg: 提示信息，只用于失败提示，覆盖默认提示文字
					</view>
					<view class="">
						disabled: 禁止上传，只用于上传失败。特殊情况不可上传，如文件大小超出限制，服务器禁传
					</view>
				</view>
			</view>
			<view class="tr">
				<view>accept</view>
				<view>String</view>
				<view>image</view>
				<view>接受的文件类型, 可选值，通用image、video、media(通过选项拆分)，仅H5可用file </view>
			</view>
			<view class="tr">
				<view>sourceType</view>
				<view>String</view>
				<view>无</view>
				<view>从相册选还是拍照，album 从相册选图，camera 使用相机，不设置则两种都有</view>
			</view>
			<view class="tr">
				<view>camera</view>
				<view>String</view>
				<view>无</view>
				<view>前后相机选择，front back，默认后置。仅上传视频时可用</view>
			</view>
			<view class="tr">
				<view>spaceOutside</view>
				<view>String</view>
				<view>0.75em</view>
				<view>菜单对话框的外边距</view>
			</view>
			<view class="tr">
				<view>imageWidth</view>
				<view>String</view>
				<view>无</view>
				<view>预览图宽，需带单位</view>
			</view>
			<view class="tr">
				<view>imageHeight</view>
				<view>String</view>
				<view>无</view>
				<view>预览图高，需带单位</view>
			</view>
			<view class="tr">
				<view>imageRadius</view>
				<view>String, Number</view>
				<view>0.5em</view>
				<view>预览图圆角，需带单位，或0</view>
			</view>
			<view class="tr">
				<view>imageHSpace</view>
				<view>String</view>
				<view>无</view>
				<view>预览图水平间隙，需带单位</view>
			</view>
			<view class="tr">
				<view>imageVSpace</view>
				<view>String</view>
				<view>无</view>
				<view>预览图垂直间隙，需带单位</view>
			</view>
			<view class="tr">
				<view>imageMode</view>
				<view>String</view>
				<view>aspectFill</view>
				<view>图片裁剪模式</view>
			</view>
			<view class="tr">
				<view>multipleSelect</view>
				<view>Boolean</view>
				<view>false</view>
				<view>是否开启图片多选，部分安卓机型不支持</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>activeUpload</view>
				<view>Boolean</view>
				<view>true</view>
				<view>动态上传，选择后立即触发</view>
			</view>
			<view class="tr">
				<view>deletable</view>
				<view>Boolean</view>
				<view>true</view>
				<view>全局图片是否可删除</view>
			</view>
			<view class="tr">
				<view>maxSize</view>
				<view>Number</view>
				<view>无</view>
				<view>文件大小限制，单位为byte。除以1024等于KB</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>无</view>
				<view>上传数量限制，图片可用</view>
			</view>
			<view class="tr">
				<view>maxDuration</view>
				<view>Number</view>
				<view>无</view>
				<view>拍摄视频的最大时长，单位秒，最长60秒</view>
			</view>
			<view class="tr">
				<view>compressed</view>
				<view>Boolean, String</view>
				<view>无</view>
				<view>压缩。视频默认开启，图片默认关闭。图片压缩仅APP、部分小程序可用。</view>
			</view>
			<view class="tr">
				<view>buttonHeight</view>
				<view>Number</view>
				<view>无</view>
				<view>选择菜单对话框按钮高</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用，不能操作</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读，不能操作</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>delete: icon-delete-small 删除</view>
					<view>add: icon-camera 新增</view>
					<view>waiting: icon-clock 等待中</view>
					<view>loading: vi_icon_loading1 上传中</view>
					<view>fail: icon-err 失败</view>
					<view>file: icon-field 文件</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>waiting：等待中　状态文字</view>
					<view>loading：上传中　状态文字</view>
					<view>toDelete：待删除　状态文字</view>
					<view>deleting：删除中　状态文字</view>
					<view>uploadFail：上传失败　状态文字</view>
					<view>uploadAdd：点击上传　新增按钮</view>
					<view>chooseImage：选择图片　菜单</view>
					<view>chooseVedio：选择视频　菜单</view>
					<view>tipUploadFileNoSuport：当前平台不支持选择文件　出错提示</view>
					<view>tipUploadFileOverflow：文件过大　出错提示</view>
					<view>tipUploadFail：上传失败　出错提示</view>
				</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				该组件只包含数据管理及显示，不包含上传功能
			</view>
			<view class="py-sm">
				基本使用：{{'&lt;vi-uploader :dataList="数据集">&lt;/vi-uploader>'}}
			</view>
			<view class="py-sm" style="height: 200px;">
				<vi-uploader :dataList="dataList"></vi-uploader>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{
						image:"https://pic.rmb.bdstatic.com/1530971282b420d77bdfb6444d854f952fe31f0d1e.jpeg",
						name:"图片名"
					},
					{
						image:"https://pic.rmb.bdstatic.com/1530971282b420d77bdfb6444d854f952fe31f0d1e.jpeg",
						state:"waiting",
					},
					{
						image:"https://pic.rmb.bdstatic.com/1530971282b420d77bdfb6444d854f952fe31f0d1e.jpeg",
						state:"uploading",
						name:"图片名"
					},
					{
						image:"https://pic.rmb.bdstatic.com/1530971282b420d77bdfb6444d854f952fe31f0d1e.jpeg",
						state:"fail"
					},
					{
						image:"https://pic.rmb.bdstatic.com/1530971282b420d77bdfb6444d854f952fe31f0d1e.jpeg",
						state:"deleting"
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
